<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .comp-a,.comp-b,.comp-c{
            line-height: 40px;
            padding: 10px;
            margin: 10px auto;
            border: 1px dashed #333;
        }
    </style>
</head>
<body>
    <!-- <div dataIndex="1231"></div> -->
    <!-- 根组件 -->
    <div id="app">
        <p>count:{{count}}</p>
        <p><button @click="count++">count++</button></p>
        <hr>    

        <!-- 
            父组件给子组件以html属性传递数据时
            1. 被子组件通过props属性接收 => 存储在Vue实例上 / this.$props 

            2. 没有被子组件props属性接收的数据 
                a.  会被添加到这个组件的根元素上作为html属性(默认继承)
                    (1) class 和 style属性会被合并
                    (2) 非class 和 style 会被覆盖 => 传入的属性覆盖子组件根元素原本的html属性 (没有就新增,有就覆盖)

                b.  如果不想添加到组件的根元素上  => 禁用继承
                    在组件的配置项上设置 inheritAttrs:false(class和style不会被禁用,还是会合并到组件的根元素上)

                    此时Vue实例上存在this.$attrs,用于存放没有被props接收的属性


        -->
        <!-- <laowang-a id="demo" class="one" title="hello world" style="background-color: aquamarine;" :a="1" :b="2"></laowang-a> -->

        <!-- <laowang-b id  ="demoB" class="two" title="hello world" style="background-color: aquamarine;"  :a="1" :b="2"></laowang-b> -->


        <!-- 自定义验证函数 -->
        <laowang-c id="demoC" class="two" title="hello world" style="background-color: aquamarine;"  :a="1" :b="2" :a="11"></laowang-c>
    </div>
</body>
<script>
    /*  

        组件通信: 父传子 (父组件传递数据  子组件接收数据)

        1. 父组件如何传递数据
            a. 父组件在使用子组件时,可以通过在子组件的<>内,通过html属性传递数据,到子组件 


            b. 父组件在使用子组件时,可以通过在子组件标签对内,传递html结构或文本到子组件内 (后面)


        2. 子组件如何收?    
            子组件接收父组件以html属性传递的数据时,需要先在子组件中配置props属性, 对应属性名接收数据 !! 
            a. 子组件在初始化渲染阶段接收数据(在子组件的配置项解析时一并处理), 并将其存储到当前子组件的vue实例中 ($props中也有一份)
            
            b. 使用时直接通过子组件的Vue实例使用即可


            注意:
            1. 父组件传入数据时,如果通过静态属性传入, 接收数据只能是字符串类型
               父组件传入数据时,如果通过动态属性传入(v-bind), 接收数据可以是任意类型的数据,也可以是父组件已有的数据

            2. 父组件传入数据时, HTML属性的属性名建议使用小写和中划线命名法 (html默认会将大写属性名转化为小写)

            3. 子组件接收父组件以中划线命名法格式传递的数据, props中可以通过中划线命名法或小驼峰命名接收, 但是存储到Vue实例上时都是小驼峰命名法


          父组件给子组件以html属性传递数据时
            1. 被子组件通过props属性接收 => 存储在Vue实例上 / this.$props 

            2. 没有被子组件props属性接收的数据 
                a.  会被添加到这个组件的根元素上作为html属性(默认继承)
                    (1) class 和 style属性会被合并
                    (2) 非class 和 style 会被覆盖 => 传入的属性覆盖子组件根元素原本的html属性 (没有就新增,有就覆盖)

                b.  如果不想添加到组件的根元素上  => 禁用继承
                    在组件的配置项上设置 inheritAttrs:false(class和style不会被禁用,还是会合并到组件的根元素上)

                    此时Vue实例上存在this.$attrs,用于存放没有被props接收的属性
    
    */


   

    Vue.component("laowang-a",{
        // props选项如果是一个数组, 对应属性名接收父组件传入的数据, 至于数据格式不会进行校验
        props: ["a","b"],
        template:`<div id="A" class="comp-a">
                    这是A组件
                </div>`,
        created () {
            console.log("子组件A",this);    
            console.log("子组件A",this.$props);    
            console.log("子组件A",this.a);    
        }
    })

    Vue.component("laowang-b",{
        props: ["a","b"],
        template:`<div id="b" title="hello comp-b" class="comp-b" style="font-size:20px">
                    这是B组件 
                </div>`,
        created () {
            console.log("子组件B",this);    
            console.log("子组件B",this.$props);    
            // console.log("子组件C",this.a);   
        }
    })

    Vue.component("laowang-c",{
        inheritAttrs:false,
        props: ["a","b"],
        template:`<div id="c" title="hello comp-c" class="comp-c" style="font-size:20px">
                    <span :id="$attrs.id" :title="$attrs.title">这是C组件</span>
                    <span v-bind="$attrs">这是C组件</span>
                </div>`,
        created () {
            console.log("子组件C",this);    
            // console.log("子组件C $props",this.$props);    
            console.log("子组件C $attrs",this.$attrs);    
        }
    })
   

    // 根组件 => 挂载到页面最外层中 (所有组件,都是根组件的子组件)
    var vm = new Vue({
        el:"#app",
        data:{
            count:1,
        }
    })



</script>
</html>